<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(${article.title})"></head>
<body class="">
<div class="page">
	<div class="flex-fill">
		<!--响应式顶部菜单-->
		<div th:replace="public/topbar :: flexTopbar(0)"></div>
		<div class="my-3 my-md-5">
			<div class="container">
				<div class="row mb-3">
					<!--侧边菜单-->
					<div th:replace="public/sidebar :: sidebar"></div>
					<div class="col-lg-9">
						<!--顶部菜单-->
						<div th:replace="public/topbar :: topbar(-1)"></div>
						<div class="card">
							<div class="card-body">
								<h2 th:text="${article.title}"></h2>
								<div class="d-flex align-items-center pt-5 mt-auto text-muted">
									<div style="cursor:pointer">
										<i class="fe fe-eye"></i>
										[[${article.viewCount} == null ? '0' : ${article.viewCount}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									</div>
									<div style="cursor:pointer">
										<i class="fe fe-thumbs-up"></i>
										[[${article.thumbUpCount} == null ? '0' : ${article.thumbUpCount}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									</div>
									<div style="cursor:pointer">
										<i class="fe fe-star"></i>
										[[${article.collectCount} == null ? '0' : ${article.collectCount}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									</div>
									<div style="cursor:pointer">
										<small>发表于[[${#dates.format(article.updateTime, 'yyyy-MM-dd HH:mm:ss')}]]</small>
									</div>
								</div>

								<div>
									<span class="badge bg-blue" th:each="tag : ${article.tags}" th:text="${tag.name}" style="margin: 0 0.1rem;">Spring Cloud </span>
								</div>
							</div>
							<div id="collect" class="ribbon ribbon-bookmark" style="cursor: pointer;" th:styleappend="${article.hasCollect} ? 'display:none;' : ''" onclick="collectOrCancel(true)">
								<svg class="bi bi-bookmark-plus" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
									<path fill-rule="evenodd" d="M4.5 2a.5.5 0 0 0-.5.5v11.066l4-2.667 4 2.667V8.5a.5.5 0 0 1 1 0v6.934l-5-3.333-5 3.333V2.5A1.5 1.5 0 0 1 4.5 1h4a.5.5 0 0 1 0 1h-4zm9-1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V1.5a.5.5 0 0 1 .5-.5z"/>
									<path fill-rule="evenodd" d="M13 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0v-2z"/>
								</svg>
							</div>
							<div id="unCollect" class="ribbon ribbon-bookmark" style="cursor: pointer;" th:styleappend="${article.hasCollect} ? '' : 'display:none;'" onclick="collectOrCancel(false)">
								<svg class="bi bi-bookmark-check" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
									<path fill-rule="evenodd" d="M4.5 2a.5.5 0 0 0-.5.5v11.066l4-2.667 4 2.667V8.5a.5.5 0 0 1 1 0v6.934l-5-3.333-5 3.333V2.5A1.5 1.5 0 0 1 4.5 1h4a.5.5 0 0 1 0 1h-4z"/>
									<path fill-rule="evenodd" d="M15.854 2.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 4.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
								</svg>
							</div>
							<div id="thumbUp" class="ribbon ribbon-bookmark bg-orange" style="cursor: pointer;top:5em;" th:styleappend="${article.hasThumbUp} ? 'display:none;' : ''" onclick="thumbUpOrCancel(true)">
								<svg class="bi bi-heart" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
									<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
								</svg>
							</div>
							<div id="unThumbUp" class="ribbon ribbon-bookmark bg-orange" style="cursor: pointer;top:5em;" th:styleappend="${article.hasThumbUp} ? '' : 'display:none;'" onclick="thumbUpOrCancel(false)">
								<svg class="bi bi-heart-fill" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
									<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
								</svg>
							</div>
							<div class="card-body d-flex flex-column">
								<div class="markdown" th:utext="${article.html}">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="public/footer :: footer"></div>
</div>
<script>
	function collectOrCancel(bool) {
		$.ajax({
			type: "post",
			url: "/article/collect",
			data: {
				"articleId": '[[${article.id}]]',
				"flag":bool
			},
			success: function (data) {
				if (data.code == 200) {
					if (bool) {
						$("#collect").hide();
						$("#unCollect").show();
					} else {
						$("#collect").show();
						$("#unCollect").hide();
					}
				}
			}
		})
	}

	function thumbUpOrCancel(bool) {
		$.ajax({
			type: "post",
			url: "/article/thumb",
			data: {
				"articleId": '[[${article.id}]]',
				"flag":bool
			},
			success: function (data) {
				if (data.code == 200) {
					if (bool) {
						$("#thumbUp").hide();
						$("#unThumbUp").show();
					} else {
						$("#thumbUp").show();
						$("#unThumbUp").hide();
					}
				}
			}
		})
	}
</script>
</body>
</html>
